<!-- 20220731 待调试 -->
<template>
  <div style="width: 100%; height: 100%;">
    <template v-if="urlsNew.length > 0">
        <a-image-preview-group>
          <template v-for="item in urlsNew" :key="item">
            <a-image
                :height="size"
                :width="size"
                fit="cover"
                :src="item"
            />
          </template>
        </a-image-preview-group>
    </template>
    <div
      v-else
      style="width: 100%; height: 100%;text-align: center;"
    >
      暂无
    </div>
  </div>
</template>

<script>
import { buildUrl } from '@/config/api/storage'
export default {
  props: {
    urls: {
      type: Array,
      required: true
    },
    size: {
      type: Number,
      default: 40
    }
  },
  data() {
    return {
      urlsNew: []
    }
  },
  mounted() {
    this.initUrls()
  },
  methods: {
    initUrls() {
      if (!this.urls || !(this.urls instanceof Array)) {
        return
      }
      this.urls.filter(item => item).forEach(url => {
        buildUrl(url).then(res => {
          this.urlsNew.push(res)
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
